<template>
	<vCommonPage :type="1" title="科室简介">
		<div slot="customContent" style="width: 100%" class="ksjj">
			<div class="detailBox">
				<el-button v-for="(item,index) in detailList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
					class="detailBoxItem" @click="gotoNext(item)">
					{{item.deptName}}
				</el-button>
			</div>
			<div class="bottomBox" style="display: flex; justify-content: space-between;">
				<div>
					<el-button type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
					<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
				</div>
				<div style="display: flex;align-items: center;">
					<el-button type="primary" v-show="totalPage>1"
						:class="totalPage == 1 ? 'huiBottom upPage':'blueBottom upPage'" @click="prePage()">
						上一页
					</el-button>
					<div class="pageBox" v-show="totalPage>1">
						<div class="curentPage">{{currentPage}}</div>
						/
						<div class="totalPage">{{totalPage}}</div>
					</div>
					<el-button type="primary" v-show="totalPage>1"
						:class="totalPage == 1 ? 'huiBottom downPage':'blueBottom downPage'" @click="nextPage()">
						下一页
					</el-button>
				</div>
			</div>
		</div>
	</vCommonPage>
</template>
<script>
	import {
		getDeptAll
	} from "@api/apiBox/yyjj"
	export default {
		name: "ksjjHome",
		data() {
			return {
				detailList: [],
				currentPage: 1, //初始页
				pagesize: 12, //    每页的数据
				totalPage: 0,
			};
		},
		methods: {
			prePage() {
				if (this.currentPage > 1) {
					this.currentPage--;
				}
			},
			nextPage() {
				if (this.currentPage < this.totalPage) {
					this.currentPage++;
				}
			},
			gotoNext(item) {
				this.$router.push({
					name: 'choseKsAndDoctor',
					query: {
						deptData: JSON.stringify(item) 
					}
				})
			},
			async initData() {
				let data = {
					data: {

					},
					that: this
				}
				const res = await getDeptAll(data);
				this.detailList = res.data
				this.totalPage = parseInt((this.detailList.length + this.pagesize - 1) / this.pagesize)
				this.currentPage = 1;
				console.log(res)
			}
		},
		computed: {

		},
		components: {},
		mounted() {},
		created() {
			this.initData();
		}
	};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
	.topTitle {
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		text-align: center;
		margin-top: 10px;
	}

	.bwNameDiv {
		text-align: center;
		margin-top: 0.9375rem;
		margin-bottom: 10px;
		font-size: 26px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #57A8FF;
	}

	@media (min-height: 0px) and (max-height: 1910px) {
		.detailBoxItem {
			width: 30%;
			height: 7.625rem;
			background: #FFFFFF;
			box-shadow: 0px 1px 16px 0px rgba(42, 103, 177, 0.09);
			border-radius: 8px;
			margin: 20px;
			font-size: 26px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #435C7A;
			display: flex;
			justify-content: center;
			align-items: center;
			border: none;
			margin-bottom: 0px;
		}


		.detailBox {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			width: 100%;
			padding-top: 50px;

		}

	}

	@media (min-height: 1919px) {

		.detailBoxItem {
			width: 280px;
			height: 122px;
			background: #FFFFFF;
			box-shadow: 0px 1px 16px 0px rgba(42, 103, 177, 0.09);
			border-radius: 8px;
			margin: 20px;
			font-size: 26px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #435C7A;
			display: flex;
			justify-content: center;
			align-items: center;
			border: none;
			margin-bottom: 0px;
		}


		.detailBox {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			width: 100%;
			padding-top: 30px;

		}

	}




	.detailBoxItem:active {
		background: #46C349 !important;
		color: #FFFFFF !important;
		border-radius: 8px;
	}


	.click {
		background: #46C349 !important;
		color: #FFFFFF !important;
	}

	.bzmsBox {
		position: fixed;
		top: 1150px;
		left: 100px;
		width: 879px;
		height: 630px;
		background: #FFFFFF;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 6px;
		z-index: 3;
		text-align: center;

		.bzmsBoxTilte {
			font-size: 32px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #435C7A;
			margin-top: 51px;
		}

		.zz {
			margin-top: 34px;
			font-size: 26px;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #57A8FF;
		}

		.choseBox {
			width: 793px;
			height: 350px;
			margin-top: 0px;
			margin-left: 43px;
			margin-right: 43px;
			margin-bottom: 20px;
			overflow: auto;
			display: flex;
			flex-wrap: wrap;
			overflow-x: hidden;

			.choseBoxItem {
				height: 58px;
				margin-top: 22px;
				background: #F2F4F5;
				border-radius: 8px;
				padding-left: 50px;
				padding-right: 55px;
				margin-right: 24px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #435C7A;
				border: none;
			}

			.blueClick {
				background: #57A8FF;
				color: #FFFFFF;
			}
		}

		.centerBox {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.centerBtnCancel {
				width: 150px;
				height: 70px;
				background: #FFFFFF;
				border: 2px solid #46C349 !important;
				box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
				border-radius: 8px;
				font-size: 32px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #46C349;
				margin-right: 20px;
			}

			.centerBtnMakeSure {
				width: 150px;
				height: 70px;
				background: #46C349;
				border: 2px solid #46C349;
				box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
				border-radius: 8px;
				font-size: 32px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}
		}


	}
</style>

<style>
	.xzjt .el-button+.el-button {
		margin-left: 0px;
	}
</style>
